<!-- 已阅卷列表 -->
<template>
  <div class="box">
    <div class="serarch flex align">
      <el-input
        placeholder="请输入准考证号查询"
        prefix-icon="el-icon-search"
        v-model="search"
        clearable
      >
      </el-input>

      <el-button @click="searchEvent(0)">查询</el-button>
      <el-button @click="searchEvent(1)">刷新</el-button>
      <el-button @click="searchEvent(2)" :style="idx1 == 1 ? bgkColor : ''"
        >不及格</el-button
      >
      <el-button @click="searchEvent(3)" :style="idx2 == 2 ? bgkColor : ''"
        >签名2(未签)</el-button
      >
    </div>
    <div class="new_nav flex">
      <div :class="exam_type == 1 ? 'active' : ''" @click="toType(1)">
        线上考级
      </div>
      <div :class="exam_type == 2 ? 'active' : ''" @click="toType(2)">
        线下考级
      </div>
    </div>
    <ul class="content">
      <li class="item">
        <p>已阅卷记录 共{{ total }}条</p>
      </li>
      <li class="item flex wrap between" v-infinite-scroll="load">
        <!-- <div> -->
        <ul
          class="item-self flex between"
          v-for="(item, index) in list"
          :key="index"
        >
          <div
            class="content-box"
            @click="
              navGo(
                item.check_type,
                item.id_number,
                item.examinee_number,
                item.subject_record_id,
                item.exam_video,
                item.subject_id,
                item.avatar
              )
            "
          >
            <li><span>考试名称：</span>{{ item.subject_name }}</li>
            <li><span>考试级别：</span>{{ item.subject_level_name }}</li>
            <li><span>准考证号：</span>{{ item.examinee_number }}</li>
            <li><span>阅卷时间：</span>{{ item.comment_time }}</li>
            <li>
              <span>等级：</span
              >{{
                item.comment_status == 1
                  ? "优秀"
                  : item.comment_status == 2
                  ? "良好"
                  : item.comment_status == 3
                  ? "及格"
                  : "不及格"
              }}
            </li>
            <li v-if="item.check_type == 2">
              <span>最终得分：</span>{{ item.user_score }}分
            </li>
            <li>
              <span>签名2：</span
              >{{ item.examiner_sign2 ? "已签名" : "待签名" }}
            </li>
          </div>
          <viewer>
            <img
              :src="item.avatar"
              class="avatar"
              alt="照片已损坏或无照片，请联系管理员~"
            />
          </viewer>
        </ul>
        <!-- <el-button>分值修改</el-button> -->
        <!-- </div> -->
      </li>
    </ul>
  </div>
</template>

<script>
import { checkPaperRecord } from "@/api/apiData";
import { mapMutations } from "vuex";
export default {
  name: "markedPaper",
  components: {},
  data() {
    return {
      search: "",
      idx1: "",
      idx2: "",
      page: 0,
      totalPages: 1,
      offset: 10,
      list: [],
      total: 0,
      comment_status: "",
      is_sign2: "",
      bgkColor: {
        background: "#0096FF",
      },
      exam_type: 1,
    };
  },
  computed: {},
  methods: {
    ...mapMutations(["saveImage"]),
    load() {
      this.getList();
    },
    toType(n) {
      this.exam_type = n;
      this.page = 0;
      this.totalPages = 1;
      this.list = [];
      this.getList();
    },
    // 获取记录
    getList() {
      const that = this;
      let { page, totalPages, offset, list, search, is_sign2, comment_status } =
        that;
      let obj = {
        page: page + 1,
        offset: offset,
        exam_type: that.exam_type,
      };
      if (is_sign2 !== "") {
        obj.is_sign2 = is_sign2;
      }
      if (comment_status !== "") {
        obj.comment_status = comment_status;
      }
      if (search !== "") {
        obj.examinee_number = search.trim();
      }

      if (totalPages > page) {
        checkPaperRecord(obj).then((res) => {
          if (res.code == 1) {
            if (res.data.total == 0) {
              that.total = res.data.total;
              return;
            }
            that.list = list.concat(res.data.list);
            that.page = page + 1;
            that.totalPages = Math.ceil(Number(res.data.total) / offset);
            that.total = res.data.total;
          }
        });
      }
    },
    searchEvent(val) {
      const that = this;
      switch (val) {
        case 0: //查询
          if (that.search.replace(/[, ]/g, "") == "") {
            this.$notify({
              title: "提示",
              message: "请输入准考证号后再查询~",
              type: "warning",
              duration: 2000,
            });
            return;
          }
          that.comment_status = "";
          that.is_sign2 = "";
          break;
        case 1: //重置
          that.search = "";
          that.comment_status = "";
          that.is_sign2 = "";
          that.idx1 = "";
          that.idx2 = "";
          break;
        case 2: //不及格
          if (that.idx1 == 1) {
            that.idx1 = "";
            that.comment_status = "";
          } else {
            that.idx1 = 1;
            that.comment_status = 4;
          }

          break;
        case 3: //未签名
          if (that.idx2 == 2) {
            that.idx2 = "";
            that.is_sign2 = "";
          } else {
            that.idx2 = 2;
            that.is_sign2 = 0;
          }

          break;
      }

      that.page = 0;
      that.totalPages = 1;
      this.list = [];

      that.getList();
    },
    // 页面跳转
    navGo(
      val,
      id_number,
      number,
      subject_record_id,
      video,
      subject_id,
      avatar
    ) {
      let params = {
        id_number: id_number,
        examinee_number: number,
        subject_record_id: subject_record_id,
      };
      this.saveImage(avatar);
      let name;
      switch (val) {
        case 1: //钢琴
          name = "piano";
          params.subject_id = subject_id;
          break;
        case 3: //歌唱
          params.subject_id = subject_id;
          name = "singer";
          break;
        case 2: //听力
          name = "listener";
          params.exam_video = video;
          break;
      }

      this.$router.push({
        name: name,
        query: params,
      });
    },
  },
  created() {},
  mounted() {
    //(this.$route.name);
  },
};
</script>
<style lang='less' scoped>
.box {
  padding: 20px 0;
  background: #f6f9fc;
  width: 100%;

  .serarch {
    width: 100%;
    background: #fff;
    padding: 20px 88px;

    /deep/.el-input {
      margin-right: 20px;
      padding-top: 14px;
      padding-bottom: 14px;
    }
    /deep/.el-input__inner {
      background: #f6f9fc;
      border-radius: 30px;
      font-size: 20px;
      border-color: transparent;
    }
    /deep/.el-button {
      background: @main-color;
      color: #fff;
      font-size: 18px;
      border-radius: 30px;
    }
  }
  .content::-webkit-scrollbar {
    width: 0;
  }
  .new_nav {
    background: white;
    padding-left: 88px;
    div {
      cursor: pointer;
      margin-right: 60px;
      font-size: 28px;
      color: gray;
      padding-bottom: 10px;
      border-bottom: solid 3px transparent;
    }
    .active {
      color: #0096ff;
      border-bottom: solid 3px;
    }
  }
  .content {
    width: 100%;
    padding: 28px 88px;
    box-sizing: border-box;
    height: 75vh;
    overflow-y: scroll;

    .item {
      box-sizing: border-box;
      p {
        font-size: 28px;
        color: @main-color;
      }
      .item-self {
        padding: 26px 15px;
        background: #fff;
        border-radius: 10px;
        margin: 30px 0 0;
        width: 48%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        cursor: pointer;
        .content-box {
          width: 68%;

          li {
            font-size: 20px;
            font-weight: bold;
            color: #111;
            margin-bottom: 20px;
            position: relative;
            span {
              color: #aaaaaa;
              font-weight: 500;
            }
          }
          li:last-child {
            margin-bottom: 0;
          }
        }
        .avatar {
          width: 127px;
          height: 167px;
        }
      }
      .item-self:hover {
        transform: scale(1.1);
        transition: all 0.1s linear;
      }
    }
    // .refresh {
    //   cursor: pointer;
    //   position: absolute;
    //   width:80px;
    //   height: 80px;
    //   background: #fff;
    //   box-shadow: 0 0 10px rgba(0,0,0,.3);
    //   right: 0;
    //  top: 20%;
    //   font-size: 20px;
    //   font-weight: bold;
    //   border-radius: 50%;
    //   line-height: 80px;
    //   text-align: center;
    // }
  }
}
</style>